<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>AI Users Rag chatbot</title>
  <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
  <div class="row col-md-6 col-md-offset-3">
    <table class="table table-striped" id="user_table">
      <thead>
        <tr>
          <th>ID</th>
          <th>姓名</th>
          <th>家乡</th>
        </tr>
      </thead>
      <tbody>
        
      </tbody>
    </table>
    <div class="row">
      <form name="aiForm">
        <div class="from-group">
          <label for="questionInput">提问</label>
          <input 
            type="text" 
            id="questionInput"
            class="form-control"
            name="question"
            placeholder="请输入问题"
          >
        </div>
        <button type="submit" class="btn btn-default" name="btn">查询</button>
      </form>
    </div>
  </div>
</div>
<script>
// js 主动向后端发送数据接口请求
// 前端向后端拉去数据
const tableBody = document.querySelector('table tbody');
const oForm = document.forms['aiform'];

fetch('http://localhost:3001/users')
  // 数据到达前端 二进制 -》 json  
  .then(res => res.json())
  .then(users => {
    // console.log(data);
    for (let user of users) {
      // console.log(user);
      const tr = document.createElement('tr');
      // for in json 对象遍历
      for (let key in user) {
        const td = document.createElement('td');
        td.innerText = user[key];
        tr.appendChild(td);
      }

      tableBody.appendChild(tr)
      oDorm.addEventListener('submit',e=>{
        //e.preventDefault();
        //事件对象
        // console。log（e）
        e.preventDefault();// 阻止表单默认行为  阻止表单提交
        // fetch 在页面不刷新的时候向ai server 发出请求
        console.log(event);
        //const question = oForm.question.vable;
        //发送数据到后端
        // web 2.0 动态页面开发 js fetch 可以主动拉取数据
        const question = oForm.question.vable.trim();
        if (!question){
            alert('请输入问题');
            return;
        }
        fetch(`http://localhost:1314/api?question=${question}`)
        .then(data =>data.json())
        .then(data =>{
            console.log(data)
        })
      })
    }
  })
</script> 
</body>
</html>